<template>
	<view>
		<view class="topbar">
			<view class="toptext" style="color: #F3F6FD;">
				<text style="font-size: 60rpx;  display: block;">您好，</br></text>
				<text style="font-size: 35rpx;  display: block;margin-top: 30rpx;">欢迎登录车联网服务！</text>
			</view>
			<image src="/static/kun/login/组 6@2x.png"></image>
		</view>
		<view class="login">
			<view class="input">
				<u--input placeholder="手机号登录" border="bottom" clearable></u--input>
				<u-input border="bottom" placeholder="请输入验证码">
					<template slot="suffix">
						<u-button type="primary"
							style="border-radius: 50rpx; background-color: #4E97F2; color: white;">获取验证码</u-button>
					</template>
				</u-input>
				
				<u-button type="primary"
					style="border-radius: 50rpx; background-color: #1564E6; color: white; margin-top: 80rpx;">登录</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},

		methods: {

		}
	}
</script>

<style>
	.input {
		width: 80%;
		padding-top: 120rpx;
		margin: auto;
	}

	.topbar {
		width: 100%;
		/* 或具体像素值 */
		height: 230px;
		/* 或具体像素值 */
		background-image: url("/static/kun/login/组 8@2x.png");
		position: relative;
	}

	.toptext {
		padding: 180rpx 90rpx;
	}

	.topbar image {
		top: 220rpx;
		left: 390rpx;
		position: absolute;
		height: 250rpx;
		width: 320rpx;
		z-index: 2;
	}

	.login {
		z-index: 1;
		width: 100%;
		height: 1000rpx;
		margin: -50rpx auto;
		background-color: #FFFFFF;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		position: relative;
	}
</style>